<template>
  <div class="demo-block">
    <h4>弹窗大小</h4>
    <div class="demo-row">
      <my-button type="primary" @click="modalShow = true">打开默认弹窗</my-button>
      <my-button type="primary" @click="lgModalShow = true">打开大型弹窗</my-button>
      <my-button type="primary" @click="xlModalShow = true">打开超大型弹窗</my-button>
    </div>

    <my-modal title="我是默认弹窗" size="md" :show.sync="modalShow">
      <p>默认弹窗内容</p>
      <template slot="footer">
        <my-button round @click="modalShow = false">取 消</my-button>
        <my-button round type="primary" @click="modalShow = false">确 定</my-button>
      </template>
    </my-modal>

    <my-modal title="我是大型弹窗" size="lg" :show.sync="lgModalShow">
      <p>大型弹窗内容</p>
      <template slot="footer">
        <my-button round @click="lgModalShow = false">取 消</my-button>
        <my-button round type="primary" @click="lgModalShow = false">确 定</my-button>
      </template>
    </my-modal>

    <my-modal title="我是超大型弹窗" size="xl" :show.sync="xlModalShow">
      <p>超大型弹窗内容</p>
      <template slot="footer">
        <my-button round @click="xlModalShow = false">取 消</my-button>
        <my-button round type="primary" @click="xlModalShow = false">确 定</my-button>
      </template>
    </my-modal>
  </div>
</template>

<script>
import button from "../../../../src/components/button";
import modal from "../../../../src/components/modal";
export default {
  components: {
    "my-button": button,
    "my-modal": modal,
  },
  data() {
    return {
      modalShow: false,
      lgModalShow: false,
      xlModalShow: false,
    };
  },
};
</script>

<style scoped>
.demo-row {
  margin: -10px;
}
</style>